<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <%
    include("/include/header.html"){}
    %>
</head>

<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <Row :gutter="16">
            <div class="search-group">
                <i-col span="4">
                    <i-input v-model="q.name" @on-enter="query" placeholder="角色名"/>
                </i-col>
                <i-button @click="query">查询</i-button>
            </div>
            <div class="buttons-group">
                <i-button type="info" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</i-button>
                <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
                <i-button type="error" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
            </div>
        </Row>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <Card v-show="!showList">
        <p slot="title">{{title}}</p>
        <i-form ref="formValidate" :model="role" :rules="ruleValidate" :label-width="80" inline>
                <Form-item label="名称" prop="name">
                    <i-input v-model="role.name" placeholder="请输入名称"/>
                </Form-item><br/>
                <Form-item label="编码" prop="code">
                    <i-input v-model="role.code" placeholder="请输入编码"/>
                </Form-item><br/>
            <Form-item>
                <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                <i-button type="warning" @click="reload" style="margin-left: 8px">返回</i-button>
                <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
            </Form-item>
        </i-form>
    </Card>
</div>

<script type="application/javascript">
    $(function () {
        $("#jqGrid").Grid({
            url: '${ctxPath}/sys/role/list',
            colModel: [
                    {label: '序号', id: 'id'},
                    {label: '名称', name: 'name'},
                    {label: '编码', code: 'code'},
                    {label: '创建时间', createTime: 'createTime'},
            ]
        });
    });
    var vm = new Vue({
        el: '#rrapp',
        data: {
            q: {
                name: null
            },
            role:{},
            showList: true,
            title: null,
            ruleValidate: {}
        },
        methods: {
            query: function () {
                vm.reload();
            },
            add: function () {
                vm.showList = false;
            },
            getDept: function () {
            },
            update: function () {
                var id = getSelectedRow("#jqGrid");
                if (id == null) {
                    return;
                }
                vm.showList = false;
                vm.title = "修改";
                $.sAjax({
                    url:"${ctxPath}/sys/role/info?id="+id,
                    callback:function(res){
                        vm.role = res.obj;
                    }
                })
            },
            del: function () {
                var ids = getSelectedRows("#jqGrid");
                if (ids == null) {
                    return;
                }
                confirm('确定要删除选中的记录？', function () {
                    $.sAjax({
                        url:"${ctxPath}/sys/role/delete?ids="+ids,
                        callback:function(res){
                            alert('操作成功', function (index) {
                                vm.reload();
                            });
                        }
                    })
                });
            },
            saveOrUpdate: function (event) {
                $.sAjax({
                    url: "${ctxPath}/sys/role/save",
                    data:vm.role,
                    contentType:"application/json",
                    callback:function(res){
                        alert('操作成功', function (index) {
                            vm.reload();
                        });
                    }
                })
            },
            reload: function (event) {
                vm.showList = true;
                var page = $("#jqGrid").jqGrid('getGridParam', 'page');
                $("#jqGrid").jqGrid('setGridParam', {
                    postData: {'name': vm.q.name},
                    page: page
                }).trigger("reloadGrid");
                vm.handleReset('formValidate');
            },
            handleSubmit: function (name) {
                handleSubmitValidate(this, name, function () {
                    vm.saveOrUpdate()
                });
            },
            handleReset: function (name) {
                handleResetForm(this, name);
            }
        }
    });
</script>
</body>